<template>
    <div>
        <image src="/static/my/my_top_bg.png" class="top-bg"/>
        <div class="contianer">
            <div class="user-info" @click="navTo('/pages/user/index')">
                <div class="user-info-left">
                    <image :src="userInfo.cover === null ? '/static/my/default_avar.png' : userInfo.cover" class="cover" mode="aspectFill"/>
                </div>
                <div class="user-info-right">
                    {{ userInfo.userName }}
                </div>
            </div>
            <div class="set_list">
                <div v-for="(item, index) in list" :key="item.id" class="item" @click="navTo(item.url)">
                    <div class="flex-row j_between a_item" style="width: 100%;padding-bottom: 28rpx;">
                        <div class="item-left">
                            <image :src="item.icon" class="icon" />
                            {{ item.name }}
                        </div>
                        <image src="/static/my/icon_arrow.png" class="arrow" />
                    </div>
                    <div :class="[index === list.length -1 ? '': 'underline']"></div>
                </div>
            </div>
        </div>
        <contactModal :show=show @onClose ="handleClose" />
    </div>
</template>

<script setup>
    import { reactive, ref, onMounted } from 'vue';
	import contactModal from '@/components/contactModal/index.vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
    import { getUserInfoApi } from '@/apis/index';
    import { hasLogin } from '@/utils/tools';
    let update = false;
    const userInfo = reactive({
        userName: '请点击登陆',
        cover: '/static/my/default_avar.png',
    });
    const show = ref(false);
    const list = [
        {id: 0, name: '个人资料', icon:'/static/my/mine.png', url:'/pages/user/index'},
        {id: 1, name: '我的订单', icon:'/static/my/list.png', url:'/pages/order/index'},
        // {id: 2, name: '商城', icon:'/static/my/shop.png', url:'/pages/order/order'},
        {id: 3, name: '联系我们', icon:'/static/my/contact.png', url:'/'},
        // {id: 4, name: '设置', icon:'/static/my/setting.png', url:'/pages/order/order'},
        {id: 5, name: '意见反馈', icon:'/static/my/feedback.png', url:'/pages/feedback/index'}
    ];
    onLoad(()=>{
        getUserInfo();
    })
    onShow(()=>{
        if(update){
            getUserInfo();
        }
    })
    const getUserInfo =  async () =>{
        const { obj } = await getUserInfoApi()
        userInfo.userName = obj.realname; 
        userInfo.cover = obj.avar;
    }
    const navTo = (url) => {
        if(hasLogin()){
            if(url === '/'){
                show.value = true
            }else {
                uni.navigateTo({
                    url: url
                })
            }
            if(url === '/pages/user/index'){
                update = true;
            }else{
                update = false;
            }
        } else {
            uni.navigateTo({
				url: '/pages/login/index'
			})
        }
    }
    const handleClose = ()=>{
        show.value = false
    }
</script>

<style lang="scss">
.top-bg {
    position: fixed;
    top: 0;
    width: 100%;
    height: 200px;
    z-index: -1;
}
.contianer{
    margin-left: 26rpx;
    margin-right: 26rpx;
    margin-top: 158rpx;
    .user-info{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 24rpx;
        .user-info-left{
            width: 118rpx;
            height: 118rpx;
            border-radius: 59rpx;
            border: 2rpx solid #FFFFFF;
            .cover{
                width: 118rpx;
                height: 118rpx;
                border-radius: 59rpx;
            }
        }
        .user-info-right{
            margin-left: 20rpx;
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
            line-height: 44rpx;
        }
    }
    .set_list{
        margin-top: 58rpx;
        border-radius: 40rpx;
        box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.08);
        border: 2rpx solid #FFFFFF;
        background-color: #FFFFFF;
        padding-left: 26rpx;
        padding-right: 24rpx;
        padding-top: 8rpx;
        .item{
            display: flex;
            flex-direction: column;
            padding-top: 32rpx;
            .item-left{
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                font-weight: 400;
                font-size: 28rpx;
                color: #333333;
                line-height: 40rpx;
                border-bottom: unset;
                .icon{
                    width: 48rpx;
                    height: 48rpx;
                    margin-left: 6rpx;
                }
            }
            .arrow{
                width: 48rpx;
                height: 48rpx;
            }
            .underline{
                width: calc(100vw - 124rpx);
                height: 0rpx;
                border-bottom: 1rpx solid rgba(0,0,0,0.1);
            }
        }
    }
}
</style>